// components/ConfirmModal.tsx
'use client';

import { Modal, App } from 'antd';
import { ModalFuncProps } from 'antd/es/modal/interface';
import React from 'react';

interface ConfirmModalProps {
  onOk: () => void | Promise<void>;
  onCancel?: () => void;
  title?: string;
  content?: React.ReactNode ;
  okText?: string;
  cancelText?: string;
  okType?: ModalFuncProps['okType'];
}

// 使用 App 实例的 modal 方法
export const showConfirmModal = (props: ConfirmModalProps) => {
  const { modal } = App.useApp();
  
  modal.confirm({
    title: props.title || '确认操作？',
    content: props.content || '请确认是否继续此操作',
    okText: props.okText || '确认',
    okType: props.okType || 'danger',
    cancelText: props.cancelText || '取消',
    async onOk() {
      try {
        await Promise.resolve(props.onOk());
        console.log('操作执行成功');
      } catch (error) {
        console.error('操作执行失败:', error);
        return Promise.reject(error);
      }
    },
    onCancel() {
      props.onCancel?.();
      console.log('用户取消了操作');
    },
  });
};

// 如果需要在组件外使用，可以创建一个 hook
export const useConfirmModal = () => {
  const { modal } = App.useApp();
  
  const confirm = (props: ConfirmModalProps) => {
    modal.confirm({
      title: props.title || '确认操作？',
      content: props.content || '请确认是否继续此操作',
      okText: props.okText || '确认',
      okType: props.okType || 'danger',
      cancelText: props.cancelText || '取消',
      async onOk() {
        try {
          await Promise.resolve(props.onOk());
          console.log('操作执行成功');
        } catch (error) {
          console.error('操作执行失败:', error);
          return Promise.reject(error);
        }
      },
      onCancel() {
        props.onCancel?.();
        console.log('用户取消了操作');
      },
    });
  };

  return { confirm };
};

// 空的组件（如果需要的话）
const ConfirmModalComponent: React.FC = () => null;

export default ConfirmModalComponent;